<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
  </head>
  <body>
    <!-- 
                    栅格系统
                    1.列组合
                              列数和数不能超过12，如果超过12则换行显示
                              用col-mid-XXX（列数）
                    2.列偏移
                              列数和数加上偏移数不能超过12，如果超过12换行显示
                              用col-mid-XXX col-mid-offset-XXX（偏移数）
                    3.列排序
                              用来改变列的位置，注意改变位置通过用push来向右移动，pull向左移动
                              当push到一个位置时，如果当前列上有元素，则push过来的会被原来的
                              覆盖掉，如果pull向左移动，pull到了一个位置时，当前位置上有元素
                              则会覆盖掉原来的元素，当前列呈现pull的元素
                              用col-mid-pull/push-XXX（偏移的列数）
                    4.列嵌套
                              用来对划分好的列上进行再次划分12列进行列的组合
                    5.对于分辨率会影响其显示的效果，所有可以在列上面多设置
                    不同分辨率情况的划分效果
          -->
    <div class="container">
      <!-- row为行元素col为列 -->
      <div class="row">
        <div class="col-md-4" style="background-color: azure">4</div>
        <div class="col-md-8" style="background-color: beige">8</div>
      </div>
      <hr />
      <!-- 列组合 -->
      <div class="row">
        <div class="col-md-1 col-sm-1 col-xs-1" style="background-color: azure">
          1
        </div>
        <div class="col-md-8 col-sm-3 col-xs-3" style="background-color: beige">
          8
        </div>
        <div class="col-md-1" style="background-color: aliceblue">1</div>
      </div>
      <hr />
      <!-- 列偏移 -->
      <div class="row">
        <div
          class="col-md-1 col-xs-2 col-xs-offset-1"
          style="background-color: azure"
        >
          1
        </div>
        <div class="col-md-8 col-sm-2 col-xs-2" style="background-color: beige">
          8
        </div>
        <div
          class="col-md-1 col-sm-1 col-xs-1"
          style="background-color: aliceblue"
        >
          1
        </div>
      </div>
      <hr />
      <!-- 列排序 -->
      <div class="row">
        <div
          class="col-md-10 col-sm-1 col-xs-1"
          style="background-color: azure"
        >
          1
        </div>
        <div
          class="col-md-3 col-md-push-2 col-sm-1 col-xs-1"
          style="background-color: beige"
        >
          8
        </div>
        <div
          class="col-md-8 col-sm-1 col-xs-1"
          style="background-color: aliceblue"
        >
          1
        </div>
      </div>
      <hr />
      <!-- 列嵌套 -->
      <div class="row">
        <div class="col-md-2" style="background-color: azure">
          <div class="row">
            <div
              class="col-md-1 col-sm-1 col-xs-1"
              style="background-color: lawngreen"
            >
              1
            </div>
            <div
              class="col-md-8 col-sm-8 col-xs-8"
              style="background-color: yellow"
            >
              8
            </div>
            <div
              class="col-md-1 col-sm-1 col-xs-1"
              style="background-color: salmon"
            >
              1
            </div>
          </div>
        </div>
        <div class="col-md-8" style="background-color: beige">8</div>
        <div class="col-md-1" style="background-color: aliceblue">1</div>
      </div>
    </div>
  </body>
</html>
